<template>
  <div class="game-error-page">
    <div class="game-container">
      <!-- 游戏角色 -->
      <div class="game-character">
        <div class="character-head"></div>
        <div class="character-body"></div>
        <div class="character-arm left"></div>
        <div class="character-arm right"></div>
        <div class="character-leg left"></div>
        <div class="character-leg right"></div>
        <div class="game-controller"></div>
      </div>

      <!-- 游戏机 -->
      <div class="game-console">
        <div class="console-screen">
          <div class="glitch-text">ERROR 404</div>
          <div class="pixel-text">GAME OVER</div>
        </div>
      </div>

      <!-- 文本内容 -->
      <div class="game-text">
        <h1 class="glitch-title" data-text="404">404</h1>
        <h2>哎呀！这个关卡还没开发完成！</h2>
        <p>看起来你想访问的页面被最终BOSS吃掉了，或者掉进了游戏世界的黑洞...</p>

        <div class="game-stats">
          <div class="stat">
            <span class="label">生命值</span>
            <div class="health-bar">
              <div class="health-fill"></div>
            </div>
          </div>
          <div class="stat">
            <span class="label">经验值</span>
            <div class="xp-bar">
              <div class="xp-fill"></div>
            </div>
          </div>
        </div>

        <div class="game-controls">
          <router-link class="game-btn continue" to="/">
            <i class="fas fa-home"></i> 返回主城
          </router-link>
          <button class="game-btn retry" @click="goBack">
            <i class="fas fa-redo"></i> 重新尝试
          </button>
          <button class="game-btn secret" @click="playEasterEgg">
            <i class="fas fa-gamepad"></i> 玩个小游戏
          </button>
        </div>

        <!-- 彩蛋小游戏 -->
        <div v-if="showEasterEgg" class="mini-game">
          <div class="game-instructions">
            点击方块收集金币！<span class="score">得分: {{ score }}</span>
          </div>
          <div class="game-area">
            <div
              v-for="(block, index) in blocks"
              :key="index"
              :class="['game-block', block.active ? 'active' : '']"
              :style="{top: block.top + 'px', left: block.left + 'px'}"
              @click="collectBlock(index)"
            >
              <i class="fas fa-coins"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 装饰元素 -->
      <div class="floating-pixels"></div>
      <div class="game-clouds">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameNotFound',
  data() {
    return {
      showEasterEgg: false,
      score: 0,
      blocks: [],
      gameInterval: null
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    playEasterEgg() {
      this.showEasterEgg = true;
      this.score = 0;
      this.blocks = [];

      // 生成初始方块
      this.generateBlocks();

      // 设置游戏循环
      if (this.gameInterval) clearInterval(this.gameInterval);
      this.gameInterval = setInterval(() => {
        this.generateBlocks();
      }, 1500);

      // 5秒后自动结束游戏
      setTimeout(() => {
        clearInterval(this.gameInterval);
        setTimeout(() => {
          this.showEasterEgg = false;
          alert(`游戏结束！你的得分是: ${this.score}`);
        }, 2000);
      }, 15000);
    },
    generateBlocks() {
      // 随机生成1-3个方块
      const count = Math.floor(Math.random() * 3) + 1;
      for (let i = 0; i < count; i++) {
        const gameArea = document.querySelector('.game-area');
        if (gameArea) {
          const width = gameArea.offsetWidth - 50;
          const height = gameArea.offsetHeight - 50;

          this.blocks.push({
            top: Math.floor(Math.random() * height),
            left: Math.floor(Math.random() * width),
            active: true
          });

          // 限制最多10个方块
          if (this.blocks.length > 10) {
            this.blocks.shift();
          }
        }
      }
    },
    collectBlock(index) {
      if (this.blocks[index].active) {
        this.blocks[index].active = false;
        this.score += 10;

        // 1秒后移除方块
        setTimeout(() => {
          this.blocks.splice(index, 1);
        }, 300);
      }
    }
  },
  beforeDestroy() {
    if (this.gameInterval) {
      clearInterval(this.gameInterval);
    }
  }
}
</script>

<style scoped>
.game-error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  /*font-family: 'Press Start 2P', cursive, 'Arial', sans-serif;*/
  overflow: hidden;
  position: relative;
}

.game-container {
  position: relative;
  width: 90%;
  max-width: 800px;
  padding: 2rem;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

/* 游戏角色动画 */
.game-character {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 80px;
  height: 120px;
  animation: bounce 2s infinite;
}

.character-head {
  position: absolute;
  top: 0;
  left: 20px;
  width: 40px;
  height: 40px;
  background-color: #FFD700;
  border-radius: 50%;
  border: 3px solid #333;
}

.character-body {
  position: absolute;
  top: 40px;
  left: 25px;
  width: 30px;
  height: 40px;
  background-color: #FF6347;
  border-radius: 5px;
  border: 3px solid #333;
}

.character-arm {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #FFD700;
  border: 2px solid #333;
  border-radius: 5px;
}

.character-arm.left {
  top: 45px;
  left: 15px;
  transform: rotate(-20deg);
  animation: waveLeft 1s infinite;
}

.character-arm.right {
  top: 45px;
  right: 15px;
  transform: rotate(20deg);
  animation: waveRight 1s infinite;
}

.character-leg {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #4169E1;
  border: 2px solid #333;
  border-radius: 5px;
}

.character-leg.left {
  bottom: 0;
  left: 25px;
}

.character-leg.right {
  bottom: 0;
  right: 25px;
}

.game-controller {
  position: absolute;
  bottom: -15px;
  left: 15px;
  width: 50px;
  height: 30px;
  background-color: #333;
  border-radius: 5px;
  transform: rotate(-20deg);
}

/* 游戏机 */
.game-console {
  margin: 0 auto 30px;
  width: 200px;
  height: 150px;
  background-color: #8c61ff;
  border-radius: 10px;
  border: 5px solid #333;
  padding: 10px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.console-screen {
  width: 100%;
  height: 100%;
  background-color: #222;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.glitch-text {
  color: #ff0055;
  font-size: 24px;
  position: relative;
  animation: glitch 1s infinite;
  text-shadow: 2px 2px 0 #00fffc, -2px -2px 0 #fffc00;
}

.pixel-text {
  color: white;
  font-size: 16px;
  margin-top: 10px;
  animation: blink 1s infinite;
}

/* 文本样式 */
.game-text {
  position: relative;
  z-index: 2;
}

.glitch-title {
  font-size: 5rem;
  margin: 0;
  color: #8c61ff;
  position: relative;
  display: inline-block;
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-title::before {
  left: 2px;
  text-shadow: -1px 0 #ff0055;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-title::after {
  left: -2px;
  text-shadow: -1px 0 #00fffc;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

h2 {
  font-size: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #333;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #666;
}

/* 游戏状态栏 */
.game-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 200px;
}

.label {
  font-size: 0.8rem;
  margin-bottom: 5px;
  color: #333;
}

.health-bar, .xp-bar {
  width: 100%;
  height: 15px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #333;
}

.health-fill {
  width: 30%;
  height: 100%;
  background-color: #ff0055;
  animation: pulse 2s infinite;
}

.xp-fill {
  width: 70%;
  height: 100%;
  background-color: #00fffc;
  animation: fillXp 3s infinite;
}

/* 按钮样式 */
.game-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.game-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border: 3px solid #333;
  box-shadow: 0 4px 0 #333;
  position: relative;
  top: 0;
}

.game-btn:hover {
  top: -3px;
  box-shadow: 0 7px 0 #333;
}

.game-btn:active {
  top: 4px;
  box-shadow: 0 0 0 #333;
}

.continue {
  background: #8c61ff;
  color: white;
}

.retry {
  background: #fffc00;
  color: #333;
}

.secret {
  background: #00fffc;
  color: #333;
}

/* 彩蛋小游戏 */
.mini-game {
  margin-top: 30px;
  border: 3px solid #333;
  border-radius: 10px;
  padding: 15px;
  background-color: #f0f0f0;
}

.game-instructions {
  margin-bottom: 10px;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
}

.score {
  color: #8c61ff;
  font-weight: bold;
}

.game-area {
  height: 200px;
  background-color: #e0e0e0;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 2px solid #333;
}

.game-block {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #fffc00;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #333;
  transition: transform 0.1s;
  animation: appear 0.3s;
}

.game-block.active {
  transform: scale(1);
}

.game-block:not(.active) {
  transform: scale(0);
}

.game-block:hover {
  transform: scale(1.1);
}

.game-block i {
  color: #333;
  font-size: 1.2rem;
}

/* 装饰元素 */
.floating-pixels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-pixels::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#8c61ff 1px, transparent 1px),
  radial-gradient(#00fffc 1px, transparent 1px),
  radial-gradient(#fffc00 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px, 15px 15px;
  animation: pixelFloat 20s linear infinite;
}

.game-clouds {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.cloud1 {
  width: 80px;
  height: 30px;
  top: 20%;
  left: -80px;
  animation: cloudMove 15s linear infinite;
}

.cloud2 {
  width: 60px;
  height: 25px;
  top: 40%;
  left: -60px;
  animation: cloudMove 12s linear infinite 2s;
}

.cloud3 {
  width: 100px;
  height: 35px;
  top: 70%;
  left: -100px;
  animation: cloudMove 20s linear infinite 5s;
}

/* 动画定义 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes waveLeft {
  0%, 100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}

@keyframes waveRight {
  0%, 100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(30deg);
  }
}

@keyframes glitch {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes glitch-anim {
  0% {
    clip: rect(31px, 9999px, 94px, 0);
  }
  10% {
    clip: rect(112px, 9999px, 76px, 0);
  }
  20% {
    clip: rect(85px, 9999px, 77px, 0);
  }
  30% {
    clip: rect(27px, 9999px, 97px, 0);
  }
  40% {
    clip: rect(64px, 9999px, 98px, 0);
  }
  50% {
    clip: rect(61px, 9999px, 85px, 0);
  }
  60% {
    clip: rect(99px, 9999px, 114px, 0);
  }
  70% {
    clip: rect(34px, 9999px, 115px, 0);
  }
  80% {
    clip: rect(98px, 9999px, 129px, 0);
  }
  90% {
    clip: rect(43px, 9999px, 96px, 0);
  }
  100% {
    clip: rect(82px, 9999px, 64px, 0);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(125px, 9999px, 162px, 0);
  }
  10% {
    clip: rect(120px, 9999px, 147px, 0);
  }
  20% {
    clip: rect(113px, 9999px, 171px, 0);
  }
  30% {
    clip: rect(123px, 9999px, 153px, 0);
  }
  40% {
    clip: rect(117px, 9999px, 176px, 0);
  }
  50% {
    clip: rect(124px, 9999px, 151px, 0);
  }
  60% {
    clip: rect(121px, 9999px, 155px, 0);
  }
  70% {
    clip: rect(129px, 9999px, 175px, 0);
  }
  80% {
    clip: rect(116px, 9999px, 158px, 0);
  }
  90% {
    clip: rect(128px, 9999px, 142px, 0);
  }
  100% {
    clip: rect(125px, 9999px, 163px, 0);
  }
}

@keyframes pulse {
  0%, 100% {
    width: 30%;
  }
  50% {
    width: 40%;
  }
}

@keyframes fillXp {
  0% {
    width: 70%;
  }
  50% {
    width: 75%;
  }
  100% {
    width: 70%;
  }
}

@keyframes appear {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pixelFloat {
  0% {
    background-position: 0 0, 10px 10px, 15px 15px;
  }
  100% {
    background-position: 100px 100px, 110px 110px, 115px 115px;
  }
}

@keyframes cloudMove {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .game-character {
    display: none;
  }

  .glitch-title {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  .game-stats {
    flex-direction: column;
    align-items: center;
  }

  .game-controls {
    flex-direction: column;
    align-items: center;
  }

  .game-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 添加像素字体 */
/*@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');*/
</style>
